
<template>
  <div class="tab-bar-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="显示边框">
        <el-switch v-model="data.isShowBorder" />
      </el-form-item>

      <el-form-item label="选中颜色">
        <el-color-picker v-model="data.activeColor" />
      </el-form-item>

      <el-form-item label="未选中颜色">
        <el-color-picker v-model="data.inactiveColor" />
      </el-form-item>

      <el-form-item label="背景颜色">
        <el-color-picker v-model="data.backgroundColor" />
      </el-form-item>

      <el-divider>导航项管理</el-divider>

      <el-form-item label="导航项">
        <div class="tab-bar-items">
          <div
            v-for="(item, index) in data.items"
            :key="index"
            class="tab-bar-item"
          >
            <el-input
              v-model="item.text"
              placeholder="请输入导航文字"
              size="small"
            />

            <div class="image-picker-container">
              <div class="image-preview" @click="openImagePicker(index, 'active')">
                <img
                  :src="item.activeIcon || defaultIcon"
                  alt="选中图标"
                  class="preview-img"
                >
                <div class="image-overlay">选择图标</div>
              </div>
              <div class="image-label">选中图标</div>
            </div>

            <div class="image-picker-container">
              <div class="image-preview" @click="openImagePicker(index, 'inactive')">
                <img
                  :src="item.inactiveIcon || defaultIcon"
                  alt="未选中图标"
                  class="preview-img"
                >
                <div class="image-overlay">选择图标</div>
              </div>
              <div class="image-label">未选中图标</div>
            </div>

            <el-input
              v-model="item.url"
              placeholder="请输入跳转链接"
              size="small"
            />

            <el-switch
              v-model="item.isDot"
              active-text="显示红点"
              inactive-text="不显示红点"
            />

            <el-button
              type="danger"
              icon="Delete"
              circle
              size="small"
              @click="removeItem(index)"
            />
          </div>

          <el-button
            type="primary"
            icon="Plus"
            @click="addItem"
            style="width: 100%; margin-top: 10px;"
          >
            添加导航项
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <ImagePicker ref="imagePickerRef" @select="handleImageSelect" />
  </div>
</template>

<script setup>
import { Delete, Plus } from '@element-plus/icons-vue'
import ImagePicker from '@/components/ImagePicker/index.vue'
import { ref } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])

// ImagePicker相关
const imagePickerRef = ref(null)
const currentImageIndex = ref(-1)
const currentImageType = ref('') // 'active' 或 'inactive'

// 方法
function addItem() {
  if (!props.data.items) {
    props.data.items = []
  }

  props.data.items.push({
    text: '',
    activeIcon: '',
    inactiveIcon: '',
    url: '',
    isDot: false
  })

  emit('update:data', props.data)
}

function removeItem(index) {
  if (index >= 0 && index < props.data.items.length) {
    props.data.items.splice(index, 1)
    emit('update:data', props.data)
  }
}

// ImagePicker相关方法
const defaultIcon = 'https://picsum.photos/60/60'

function openImagePicker(index, type) {
  currentImageIndex.value = index
  currentImageType.value = type
  imagePickerRef.value.open()
}

function handleImageSelect(image) {
  if (currentImageIndex.value >= 0 && currentImageIndex.value < props.data.items.length) {
    let imageUrl = image.url
    if (imageUrl && !imageUrl.startsWith('http')) {
      if (imageUrl.startsWith('/profile')) {
        imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
      } else {
        imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
      }
    }

    if (currentImageType.value === 'active') {
      props.data.items[currentImageIndex.value].activeIcon = imageUrl
    } else if (currentImageType.value === 'inactive') {
      props.data.items[currentImageIndex.value].inactiveIcon = imageUrl
    }
    
    emit('update:data', { ...props.data })
  }
}
</script>

<style lang="scss" scoped>
.tab-bar-panel {
  padding: 10px;

  .tab-bar-items {
    width: 100%;

    .tab-bar-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 4px;

      .el-input {
        margin-bottom: 10px;
      }

      .el-upload {
        margin-bottom: 10px;
      }

      .el-switch {
        margin-bottom: 10px;
      }

      .el-button {
        align-self: flex-end;
      }
      
      .image-picker-container {
        margin-bottom: 10px;
        
        .image-preview {
          position: relative;
          width: 60px;
          height: 60px;
          border: 1px dashed #d9d9d9;
          border-radius: 4px;
          cursor: pointer;
          overflow: hidden;
          
          .preview-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
          }
          
          &:hover .image-overlay {
            opacity: 1;
          }
        }
        
        .image-label {
          font-size: 12px;
          color: #606266;
          margin-top: 5px;
          text-align: center;
        }
      }
    }
  }
}
</style>
